<template>
	<view class="" style="width: 100vw;height: 100vh">
		<view class="content" :style="{'background':kbackgroundColor}" style="min-height: 100vh">
			<hx-navbar :title="info.name" :back="true" :fixed="false" :color="knavTitleColor" barPlaceholder="hidden"
				transparent="auto"></hx-navbar>
			<view class="container">
				<view class="collect_img_box">
					<view v-if="ktheme != 'purple'" style="width:100%;height: 700rpx;">
						<view class=""
							style="width:100%;height: 100%;display: flex;justify-content: center;align-items: center;">
							<image src="/static/index/details/lowercover.png"
								style="width:100%;height: 100%;display: inline-block;"></image>
						</view>
						<view
							style="width:100%;height: 100%;display: flex;justify-content: center;align-items: center;margin-top: -700rpx;">
							<image :src="info.image" style="width:45%;margin-left: 1.5%;z-index: -1;" mode="aspectFit">
						</view>
					</view>
					<view v-else class="" style="z-index: -10;">
						<view class="animal-box">
							<view class="ani-list">
								<uni-view class="ani-info2 r1">
									<img class="an-image2" src="/static/login/logo.png" alt="Your Image">
								</uni-view>
								<uni-view class="ani-info2 r1-bg"></uni-view>
								<uni-view class="ani-info r2"></uni-view>
								<uni-view class="ani-info2 r3-bg">
									<image class="an-image2" src="@/static/aipicture/zfsl_back.png" alt="Your Image">
								</uni-view>
								<uni-view class="ani-info r4"></uni-view>
								<uni-view class="ani-info r5"></uni-view>
								<uni-view class="ani-info r6"></uni-view>

							</view>

						</view>
					</view>

				</view>
				<view class="c_name">
					<view class="c_left">
						<image src="/static/user/jiantou_left_black.png" mode=""></image>
					</view>
					<view class="c_con" style="margin: 0 10rpx;" :style="{color:knormalColor}">
						{{info.name}}
					</view>
					<view class="c_right">
						<image src="/static/user//jiantou_right_black.png" mode=""></image>
					</view>
				</view>
				<view class="c_hd" :style="{color:knormalColor}">
					活动时间：{{info.startTime |filterTime}}-{{info.endTime |filterTime}}
				</view>
				<view class="c_hd"
					style="display: flex;justify-content: space-evenly; align-items: center;width: 690rpx;margin: 10rpx auto;">

					<view class="lines" style=""> </view>
					<view class="" :style="{color:knormalColor}">
						<image src="@/static/user/list.png" mode=""
							style="width: 32rpx;height: 32rpx;margin-right:10rpx;"></image>所需分解材料
					</view>
					<view class="lines" style=" "> </view>
				</view>
				<view class="" style="width:100%;height:auto;margin: 40rpx auto 40rpx;">
					<view class=""
						style="width:100%;height: 100%;display: flex;justify-content: center;align-items: center;">
						<view class="" v-for="(hcitem,index) in info.details">
							<view class="" :class="[ktheme != 'purple'?'price_boxblack':'price_box']"
								:style="{'border':ktopicAdaptationColors+' 2px solid'}">
								<view class="fj_image" :style="{'border':ktopicAdaptationColors+' 2px solid'}">
									<image class="fj_img" style="" :src="hcitem.item.image" mode=""></image>
									<view class="name_cl" :style="{color:knormalColor}">
										{{hcitem.item.name}}

									</view>
								</view>
								<view class="compound_suo" v-if="hcitem.ownQuantity>=hcitem.needQuantity?false:true">
									<image src="@/static/user/lock.png" class="c_suo" mode=""></image>
								</view>
								<view class=""
									:style="[{color:knormalColor},{'border':ktopicAdaptationColors+' 2px solid'}]"
									style="position: absolute;top: 0;right: 10rpx;color: aqua;font-size: 32rpx;padding: 2rpx;border-radius: 10rpx;">
									{{hcitem.ownQuantity}}/{{hcitem.needQuantity}}

								</view>

							</view>

						</view>


					</view>
				</view>
				<!-- item是分解或者合成的结果商品，detail是分解或者合成的源商品 -->
				<!-- 分解光圈 -->
				<view class="" style="width: 90%;margin: 20rpx auto 90rpx;">
					<!-- compound_item :class="{has_choose:item.ownQuantity >=item.needQuantity}"-->
					<view class="" style="display: flex;justify-content: center;">
						<view class="" v-for="(item,index) in info.items" :key="index">
							<view class="" style="text-align: center;transform: translateY(0%);">
								<image src="@/static/arrows_black.png" style="width:40rpx;height: 140rpx;" mode="">
								</image>
							</view>
							<view class="compound_class" :style="{'border':ktopicAdaptationColors+' 2px solid'}">
								<view class="has_choose"
									style="width: 180rpx;height: 180rpx;margin: auto;line-height: 130rpx;">
									<image :src="item.item.image"
										style="width: 80%;height: 80%;margin: 2rpx auto;border-radius: 12rpx;"
										mode="aspectFit">
									</image>
								</view>
								<view class="compound_num" :style="{'background':kselectColorSize}" style="">
									x{{item.quantity}}<!-- 	{{item.item.needQuantity}}/{{item.item.needQuantity}} -->
								</view>
								<!-- ownQuantity=拥有   needQuantity=需要 -->

								<view class="" style="margin: 13rpx auto;font-size:20rpx;text-align: center;"
									:style="{color:knormalColor}">
									{{item.item.name}}
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="c_hd" :style="{color:knormalColor}"> 集齐以上材料即可进行分解</view>
				<view class="c_hd" @click="tiaozhanConfirm()" :style="{color:ktopicAdaptationColors}">
					去购买分解材料
					<image src="@/static/free/jiantuo_purple.png" class="gf_image" v-if="ktheme == 'purple'" mode="">
					</image>
					<image src="@/static/free/jiantou_black.png" class="gf_image" v-if="ktheme == 'black'" mode="">
					</image>
					<image src="@/static/free/jiantuo_purple.png" class="gf_image" v-if="ktheme == 'purple'" mode="">
					</image>
					<image src="@/static/free/jiantou_black.png" class="gf_image" v-if="ktheme == 'black'" mode="">
					</image>
				</view>
			</view>

			<view v-if="info.content" :class="[ktheme != 'purple'?'cont-box_black':'cont-box']">
				<view class="cont_size" :style="{'color': (ktheme != 'purple' ? '#BBDC69':'#000')}">
					分解描述
				</view>
				<view class="" :style="{'border':ktopicAdaptationColors+' 3px solid'}"
					style="background-color: white;width: 100%;margin:10rpx auto;padding: 16rpx;border-radius: 10rpx;">
					<jshopContent :content="info.content" v-if="info.content"></jshopContent>
				</view>
			</view>
			<view v-if="hcList.content" :class="[ktheme != 'purple'?'cont-box_black':'cont-box']">
				<view class="cont_size" :style="{'color': (ktheme != 'purple' ? '#BBDC69':'#000')}">
					版权权益
				</view>
				<view class="content_box borradius">
					<jshopContent :content="hcList.content"></jshopContent>
				</view>
			</view>
			<view v-if="hcList.copyright" :class="[ktheme != 'purple'?'cont-box_black':'cont-box']">
				<view class="cont_size" :style="{'color': (ktheme != 'purple' ? '#BBDC69':'#000')}">
					版权展示
				</view>
				<jshopContent :content="hcList.copyright"></jshopContent>
			</view>

			<view style="height: 130rpx;"></view>
			<view class="foot" :style="{background:ktabbarBgColor}">

				<view class="btn" :style="{background:kbuttonBgColor}" @tap="go_resolve()">分解</view>
			</view>

			<!-- 提示 -->
			<uni-popup ref="reDialog" type="center" :maskBackgroundColor="'rgba(0,0,0,0.5)'" :isMaskClick="false">
				<view class="store-view store-border-all tips-padding"
					:style="{'background':kbackgroundColor,color:knormalColor}"
					:class="[{'alert-border-black alert-border-shadow-black':ktheme =='black'},{'alert-border-purple':ktheme =='purple'}]">
					<text class="popup-title">提示</text>
					<text class="popup-subtitle">缺少分解数据!</text>
					<view class="tips-bottom">
						<view class="tips-button"
							:class="[{'tips-cancel-bg-black':ktheme =='black'},{'tips-cancel-bg-white':ktheme =='purple'}]"
							@click="tiaozhuanClose()">关闭</view>
						<view class="tips-button" :style="{background:kbuttonBgColor}" @click="tiaozhanConfirm()">去购买
						</view>
					</view>
				</view>
			</uni-popup>
			<!-- 确定是否分解提示 -->
			<uni-popup ref="confirmDialog" type="center" :maskBackgroundColor="'rgba(0,0,0,0.5)'" :isMaskClick="false">
				<view class="store-view store-border-all tips-padding"
					:style="{'background':kbackgroundColor,color:knormalColor}"
					:class="[{'alert-border-black alert-border-shadow-black':ktheme =='black'},{'alert-border-purple':ktheme =='purple'}]">
					<text class="popup-title">提示</text>
					<text class="popup-subtitle">确定要分解藏品?</text>
					<view class="tips-bottom">
						<view class="tips-button"
							:class="[{'tips-cancel-bg-black':ktheme =='black'},{'tips-cancel-bg-white':ktheme =='purple'}]"
							@click="colfirmClose()">关闭</view>
						<view class="tips-button" :style="{background:kbuttonBgColor}" @click="payDialog()">确定</view>
					</view>
				</view>
			</uni-popup>

			<paypass ref="passbox" @confirm="set_done"></paypass>
		</view>
	</view>
	</view>
</template>

<script>
	import jshopContent from '@/components/jshop/jshop-content.vue' //视频和文本解析组件
	import paypass from '@/components/pay_pass/pay_pass.vue' //视频和文本解析组件
	import xwCountDown from '@/components/xw-CountDown'

	export default {
		components: {
			jshopContent,
			paypass,
			xwCountDown
		},
		data() {
			return {
				tiType: "",
				headName: "",
				info: [],
				ifresolve: false,
				item: {},
				list: [{
					id: 1,
					Image: '/static/without.png'
				}, {
					id: 2,
					Image: '/static/without.png'
				}, {
					id: 3,
					Image: '/static/without.png'
				}],
				id: '',
				ids: [],
				is_hecheng: 0,
				info_name: {},
				ifopen: true,
				// 是否有分解子藏品
				allEnable: true,
				hcList: []
			}
		},
		filters: {
			filterTime(val) {
				return uni.$u.timeFormat(parseInt(val), 'yyyy年mm月dd日')
			}
		},
		onLoad(options) {
			this.id = options.id

			this.getfurnacel()
			console.log("加载中--")
			// this.$api.getCollectionDetails(this.id, res => {
			// 	console.log("this.info --1-", res)
			// 	if (res.status) {
			// 		this.info = res.data;
			// 		console.log("this.info --1-", this.info)

			// 		this.$api.getGoodsDetails(res.data.iid, res => {
			// 			this.item = res.data
			// 			console.log("this.item -1--", this.item)
			// 		})
			// 	}
			// })
		},
		methods: {
			tiaozhuan() {
				this.$refs.reDialog.open()
			},
			//去购买
			tiaozhanConfirm() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			tiaozhuanClose() {
				this.$refs.reDialog.close()
			},
			colfirmClose() {
				this.$refs.confirmDialog.close()
			},
			// 是否可以分解
			enableCompound() {
				if (parseInt(this.info.startTime) < new Date().getTime() &&
					parseInt(this.info.endTime) > new Date().getTime() &&
					this.info.items.length > 0 &&
					this.allEnable) {
					return true
				} else {
					return false
				}
			},
			getMaterialcount() { //判断分解材料
				this.$api.materialcount({
					furnace_id: this.id
				}, res => {
					if (res.status) {
						this.ids = res.data.snlist
						this.is_hecheng = res.data.is_hecheng
					}
				})
			},
			getfurnacel() { //分解商品详情
				this.$api.furnacel(this.id, res => {
					console.log("res-", res)
					if (res.status) {
						this.info = res.data;

						let list = this.info.details

						res.data.items.forEach(val => {
							this.hcList = val.item

						})
						console.log("this.hcList", res.data.items)
						if (!list) {
							list = []
						}
						list.forEach(item => {
							//- ownQuantity=拥有   needQuantity=需要
							if (!this.allEnable) {
								this.allEnable = false
							} else {
								if (item.ownQuantity >= item.needQuantity) {
									this.allEnable = true
								} else {
									this.allEnable = false
								}
							}

						})
					}
				})

			},
			material() { //查看商品需要的材料
				this.$api.material({
					furnace_id: this.id
				}, res => {
					if (res.status) {
						let list = res.data;
						for (var i = 0; i < list.length; i++) {
							list[i]['has_choose'] = false
						}
						this.list = list;
						console.log(this.list, "this.list")
					}
				})
			},
			// 分解藏品
			set_done: function(pass) {

				let data = {
					mergeId: this.id,
					secondPassword: pass,
				}
				this.$api.compound(data, res => {
					if (res.status) {
						this.$common.successToShow("分解成功")
						this.ifresolve = true
						setTimeout(() => {
							uni.redirectTo({
								url: '/pages/collection/collection'
							})
						}, 3000);
					} else {
						this.$common.errorToShow(res.message)
					}
				})
			},
			colfirmClose() {
				this.$refs.confirmDialog.close()
			},
			//支付弹框
			payDialog() {
				this.$refs.confirmDialog.close()
				this.$api.checkSecondPassword({}, res => {
					if (res.status) {
						let data = res.data
						if (data.secondPassword) {
							this.$refs.passbox.open();
						} else {
							this.$common.errorToShow('请设置交易密码', () => {
								uni.navigateTo({
									url: '/pages/user/settings/pay_pass/pay_pass'
								})
							});
						}
					} else {
						this.$common.errorToShow('网络异常');
					}
				})
			},
			go_resolve() {
				console.log("	this.allEnable 00", this.allEnable)
				// 获取当前时间
				let now = new Date();
				console.log('--', now.getTime())
				// 提取年  
				let year = now.getFullYear();
				// 提取月（注意：月份是从0开始的，所以需要+1）  
				let month = now.getMonth() + 1;
				// 提取日  
				let date = now.getDate();
				// 提取小时  
				let hours = now.getHours();
				// 提取分钟  
				let minutes = now.getMinutes();
				// 提取秒  
				let seconds = now.getSeconds();

				// 格式化月份、日期、小时、分钟和秒（如果小于10，前面补0）  
				month = month < 10 ? '0' + month : month;
				date = date < 10 ? '0' + date : date;
				hours = hours < 10 ? '0' + hours : hours;
				minutes = minutes < 10 ? '0' + minutes : minutes;
				seconds = seconds < 10 ? '0' + seconds : seconds;

				// 拼接年月日时分秒字符串  
				let timeString = `${year}-${month}-${date} ${hours}:${minutes}:${seconds}`;
				var startTime = uni.$u.timeFormat(parseInt(this.info.startTime), 'yyyy-mm-dd hh:MM:ss')
				var endTime = uni.$u.timeFormat(parseInt(this.info.endTime), 'yyyy-mm-dd hh:MM:ss')
			
			// //优先合时间
			var endPreTime = uni.$u.timeFormat(parseInt(this.info.endPreTime), 'yyyy-mm-dd hh:MM:ss')
			var startPreTime = uni.$u.timeFormat(parseInt(this.info.startPreTime), 'yyyy-mm-dd hh:MM:ss')
			if (this.info.difference != '1008611' && this.info.difference >= 1) {
				if (timeString < startPreTime) { //未开启
					this.$common.errorToShow('活动还未开启');
				}else if(timeString > endTime){
						this.$common.errorToShow('活动已经结束');
				} else if (this.info.items.length > 0 && this.allEnable && this.info.details.length) {
					this.$refs.confirmDialog.open()
				} else {
					this.$refs.reDialog.open()
			    }
				//正常活动时间
			} else if (this.info.difference == '1008611') {
					if (timeString < startTime) { //未开启 timeString当前   startTime开始时间 endTime结束
						this.$common.errorToShow('活动还未开启');
					} else if (timeString > endTime) {
						this.$common.errorToShow('活动已经结束');
					} else if (this.info.items.length > 0 && this.allEnable && this.info.details.length) {
						this.$refs.confirmDialog.open()
					} else {
						this.$refs.reDialog.open()
					}
			}else{
					this.$common.errorToShow('藏品合成限制');
			}
			
			}
		}
	}
</script>

<style lang="scss">
	@import "@/pages/index/detail.scss";

	/deep/.uni-dialog-title-text {
		color: orange !important;
		font-size: 39rpx;
	}

	/deep/.uni-dialog-content-text {
		font-size: 35rpx;
	}

	.collect_img_box {
		margin: 30rpx auto;
	}

	.price_box {
		margin: 10rpx;
		padding: 10rpx;
		border-radius: 20rpx;
		position: relative;
		background: linear-gradient(180deg, #ffffff76 0%, #ffffff76 50%, #bb9cf747 80%, #ac7de5ba 100%);
	}

	.price_boxblack {
		margin: 10rpx;
		padding: 10rpx;
		border-radius: 20rpx;
		position: relative;
		background: linear-gradient(180deg, #00000076 0%, #00000076 50%, #d4f79c47 80%, #c5e576ba 100%);
	}

	@keyframes rotatexz {
		from {
			transform: rotateY(0deg);
		}

		to {
			transform: rotateY(360deg);
		}
	}

	// 3D
	.animal-box {
		-webkit-perspective: 800;
		-webkit-transform-style: preserve-3d;
		perspective: 800;
		transform-style: preserve-3d;
		position: relative;
		width: 503rpx;
		height: 503rpx;
		margin: 13rpx auto;
	}

	.ani-list {
		position: absolute;
		left: 0rpx;
		top: 0rpx;
		-webkit-transform: rotateY(-50deg);
		-webkit-transform-style: preserve-3d;
		transform: rotateY(271deg); //rotateY(-50deg);
		transform-style: preserve-3d;
		-webkit-transform-origin: center;
		transform-origin: center;
		width: 500rpx;
		height: 500rpx;
		margin: 0 auto;
		animation: rotatexz 15s infinite linear;
		border-radius: 43rpx;

	}

	.animal-box .ani-list .r1,
	.animal-box .ani-list .r3 {
		width: 100%;
		height: 100%;
		margin: 0 auto;
		background-color: #dddedf;
		border: 5rpx solid #ff3936;
	}

	.animal-box .ani-list .r1-bg {
		top: 0px;
		width: 500rpx;
		height: 500rpx;
		-webkit-transform: translateZ(27rpx); //14px
		transform: translateZ(27rpx);
		background-color: #dddedf;
	}

	.animal-box .ani-list .r2 {
		top: 21rpx;
		transform: rotateY(90deg) translateZ(492rpx) translateX(-26rpx); //-26rpx
		transform-origin: left;
		width: 50rpx;
		height: 450rpx;

	}

	.animal-box .ani-list .r4 {
		// top: 20px;
		top: 20rpx;
		//28px
		-webkit-transform: rotateY(-90deg) translateZ(20rpx) translateX(0rpx);
		//10px
		transform: rotateY(-90deg) translateZ(20rpx) translateX(0rpx);
		width: 52rpx;

		// height: 230px;

		height: 450rpx;
	}

	.animal-box .ani-list .r1,
	.animal-box .ani-list .r3 {
		width: 100%;
		height: 100%;
		margin: 0 auto;
		background-color: #dddedf;
		// border: 5rpx solid #ff3936;
		border: 5rpx solid #673DE7;
	}

	.animal-box .ani-list .r3-bg {
		top: 0px;
		width: 500rpx;
		height: 500rpx;

		-webkit-transform: rotateY(180deg) translateZ(27rpx); //14px
		transform: rotateY(180deg) translateZ(27rpx);
		background-color: #dddedf;
		border: 5rpx solid #673DE7; //red
	}

	.ani-info2 {
		list-style-type: none;
		position: absolute;
		//top: 0px;
		left: 0px;
		right: 0px;
		bottom: 0px;
		text-align: center;
		// width: 249px;
		//height: 249px;
		// background: url('@/logo.png') no-repeat;
		// background-size: 100% 100%;
		background: #e8e8e8;
		-webkit-transition: -webkit-transform 2s, opacity 2s;
		-webkit-backface-visibility: visible;
		transition: opacity 2s, -webkit-transform 2s;
		transition: transform 2s, opacity 2s;
		transition: transform 2s, opacity 2s, -webkit-transform 2s;
		backface-visibility: visible;
		border-radius: 56rpx;
	}

	.animal-box .ani-list .ani-info {
		list-style-type: none;
		position: absolute;
		left: 0px;
		right: 0px;
		bottom: 0px;
		text-align: center;
		background: #e8e8e8;
		-webkit-transition: -webkit-transform 2s, opacity 2s;
		-webkit-backface-visibility: visible;
		transition: opacity 2s, -webkit-transform 2s;
		transition: transform 2s, opacity 2s;
		transition: transform 2s, opacity 2s, -webkit-transform 2s;
		backface-visibility: visible;
		border-radius: 16rpx;
	}

	.animal-box .ani-list .r5 {
		left: 20rpx;
		top: 16rpx;

		-webkit-transform: rotateX(90deg) translateZ(22rpx); //11px
		transform: rotateX(90deg) translateZ(22rpx);
		// height: 26px;
		// width: 218px;
		height: 50rpx;

		width: 440rpx;
	}

	.animal-box .ani-list .r6 {
		left: 20rpx;
		top: -25rpx;
		//	-webkit-transform: rotateX(-90deg) translateZ(236px);
		transform: rotateX(-90deg) translateZ(472rpx);
		// height: 26px;
		// width: 218px;
		height: 50rpx;

		width: 440rpx;
	}

	// 	.animal-box .ani-list .r1 .an-image, .animal-box .ani-list .r3 
	.an-image {
		width: 100%;
		height: 100%;
		margin: 0rpx auto;
		background: #ffffff;
		padding: 30rpx;
		// border:5rpx solid red;
		box-sizing: border-box;
		border-radius: 52rpx;

		.image {

			border-radius: 50rpx;
		}
	}

	.an-image2 {
		width: 100%;
		height: 100%;
		margin: 0rpx auto;
		background: #ffffff;
		// border:5rpx solid red;
		box-sizing: border-box;
		border-radius: 52rpx;

		.image {}
	}

	.has_choose {
		filter: grayscale(0%);

		border-radius: 20rpx;

	}

	.has_choose {
		display: flex;
	}

	.animal-box .ani-list .r1 {
		-webkit-transform: translateZ(30rpx); //15px
		transform: translateZ(30rpx);
	}

	.c_name {
		display: flex;
		justify-content: center;
		color: white;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 34rpx;

		image {
			width: 70rpx;
			height: 25rpx;
			margin: 0 10rpx;
		}
	}

	.c_hd {
		margin: 40rpx auto;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #FFFFFF;
		// line-height: 40rpx;
		text-align: center;
		font-style: normal;
	}

	.gf_image {
		padding-left: 10rpx;
		width: 16rpx;
		height: 24rpx;
	}

	.cont-box {
		width: 100%;
		height: auto;
		background: rgba(255, 255, 255, .9);
		border-radius: 20rpx;
		border: 1rpx solid #DCDCDC;
		padding: 30rpx;
		margin-top: 20rpx;
	}

	.cont_size {
		color: #2a2a2a;
		font-size: 31rpx;
		font-weight: 600;
		margin-bottom: 10rpx;
	}

	.cont-box_black {
		width: 100%;
		height: auto;
		background: #000;
		border-radius: 20rpx;
		// border: 1rpx solid #DCDCDC;
		padding: 30rpx;
		margin-top: 20rpx;
	}

	.gq_class {
		width: 402rpx;
		height: 396rpx;
		display: inline-block;
		position: relative;

	}

	//动画
	@keyframes rotate {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(360deg);
		}
	}

	@keyframes fadeInFromTop {
		0% {
			opacity: 0;
			/* 动画开始时图片完全透明 */
			transform: translateY(-10%);
			/* 图片在容器上方 */
			z-index: -1;
		}

		0% {
			opacity: 0.4;
			/* 动画开始时图片完全透明 */
			transform: translateY(20%);
			/* 图片在容器上方 */
			z-index: 1;
		}

		100% {
			opacity: 1;
			/* 动画结束时图片完全不透明 */
			transform: translateY(60%);
			/* 图片移动到容器内 */
		}
	}

	.animation {
		animation: fadeInFromTop 2s ease-in-out forwards;
		//	animation: rotate 5s;
		/* 应用动画 */
		//	animation-iteration-count: 1;
		/* 动画执行次数，设置为1表示只执行一次 */
	}

	.name_cl {
		text-align: center;
		width: 100%;
	}

	.fj_image {
		// position: absolute;
		color: red;
		width: 230rpx;
		height: 310rpx;
		border-radius: 10rpx;
		text-align: center;
		display: flex;
		flex-wrap: wrap;
		align-content: space-around;
		justify-content: center;
		align-items: stretch;

		.fj_img {
			border-radius: 20rpx;
			width: 68%;
			height: 60%;
		}
	}

	//小动画光圈
	//动画
	@keyframes animRotate {
		0% {
			opacity: 0;
			/* 初始状态为完全透明 */
		}

		50% {
			opacity: 0.5;
			/* 初始状态为完全透明 */
		}

		100% {
			opacity: 1;
			/* 结束状态为完全不透明 */
		}
	}

	.anim_xgq {


		animation-iteration-count: 1;
		/* 动画执行次数，设置为1表示只执行一次 */
		/* 其他动画属性，如timing-function等 */
		animation: animRotate 3s;
	}

	.lines {
		width: 160rpx;
		height: 2rpx;
		border: 2rpx solid #FFFFFF;
		opacity: 0.5;
	}

	.compound_class {
		width: 180rpx;
		height: 180rpx;
		border-radius: 20rpx;
		border: 2rpx solid #BDDE69;
		// margin-right: 22rpx;
		margin: 10rpx;
		position: relative;
	}

	.compound_num {
		position: absolute;
		right: -2rpx;
		bottom: 0rpx;
		min-width: 77rpx;
		padding: 2rpx 4rpx;
		height: 48rpx;
		color: white;
		background: #C5E576;
		border-radius: 24rpx 0rpx 20rpx 0rpx;
		text-align: center;
		line-height: 48rpx;
	}

	.c_suo {
		width: 44rpx;
		height: 56rpx;
		position: absolute;
		right: 40%;
		bottom: 50%;
	}

	.compound_item {

		border: 2px solid rgba(2, 2, 2, 0);
		filter: grayscale(100%);

		z-index: 10;
		// display: none;
	}

	.back_black {}

	.ts_botton {
		display: flex;
		justify-content: space-around;

		.tsb {
			width: 240rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			border-radius: 40rpx;
		}
	}

	.alert-border-purple {
		box-shadow: 2rpx 2rpx 12rpx 4rpx #51515166 !important;
		box-shadow: inset 0rpx 0rpx 50rpx 0rpx rgba(254, 162, 221, 0.91) !important;
		background-color: #fff !important;
	}

	.alert-border-black {
		border: 6rpx solid transparent !important;
		background-clip: padding-box, border-box !important;
		background-origin: padding-box, border-box !important;
		background-image: linear-gradient(to bottom, #222, #222), linear-gradient(180deg, rgba(244, 249, 123, 1), rgba(84, 203, 122, 1)) !important;
	}

	.alert-border-shadow-black {
		box-shadow: inset 0rpx 0rpx 50rpx 0rpx rgba(88, 204, 123, 0.9) !important;
	}

	.store-border-top {
		border-top-left-radius: 40rpx;
		border-top-right-radius: 40rpx;
	}

	.store-border-all {
		border-radius: 40rpx;
		width: 660rpx;
	}

	.tips-padding {
		margin: 0 40rpx;
	}

	.store-view {
		display: flex;
		flex-direction: column;
		margin-bottom: -6rpx;
		max-height: 1000rpx;

		.tips-bottom {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			font-size: 28rpx;
			margin: 0 40rpx 40rpx 40rpx;

			.tips-button {
				padding: 20rpx 0;
				width: 240rpx;
				text-align: center;
				border-radius: 40rpx;
				color: #333333;
			}

			.tips-cancel-bg-black {
				border: 2rpx #1CBC4D solid;
				background: #333333;
				color: white;
			}

			.tips-cancel-bg-white {
				border: 2rpx #999999 solid;
				background: white;
				color: #333333;
			}
		}

		.freeze-row-black {
			background: rgba(255, 0, 0, 0.5);
		}

		.freeze-row-white {
			background: rgba(255, 0, 0, 0.1);
		}

		.freeze-row {
			display: flex;
			flex-direction: row;
			align-items: center;
			padding: 14rpx 40rpx;
			width: 100%;

			.freeze-icon {
				width: 34rpx;
				height: 28rpx;
			}

			.freeze-text {
				color: #EA4729;
				margin-left: 20rpx;
			}
		}

		.popup-title {
			width: 100%;
			margin-top: 40rpx;
			text-align: center;
		}

		.popup-subtitle {
			font-size: 28rpx;
			padding: 40rpx;
			text-align: center;
		}

		.popup-disabel-title {
			color: #F65656;
			font-size: 28rpx;
			padding: 40rpx;
		}

		.store-item {
			padding: 20rpx 40rpx;
			display: flex;
			flex-direction: row;
			align-items: center;

			.store-image {
				width: 100rpx;
				height: 100rpx;
			}

			.store-column {
				display: flex;
				flex-direction: column;
				margin: 0 20rpx;
				position: relative;
				width: 50%;

				.store-title {
					font-size: 30rpx;
				}

				.store-small-title {
					font-size: 26rpx;
				}

				.store-tag {
					padding: 4rpx 18rpx;
					font-size: 24rpx;
					margin-top: 6rpx;
					margin-right: auto;
				}

				.store-number {
					margin-top: 4rpx;
					font-size: 24rpx;
				}
			}

			.award-success-icon {
				width: 200rpx;
				height: 160rpx;
			}

			.store-buy {
				margin-left: auto;
				padding: 8rpx 30rpx;
				border-radius: 46rpx;
				font-size: 26rpx;
				color: white;
			}

			.store-buy-black {
				border-radius: 8rpx;
				border: 2rpx #58CC7B solid;
				background-color: rgba(88, 204, 123, 0.20);
				color: #58CC7B;
			}

			.store-buy-white {
				border-radius: 8rpx;
				border: 2rpx #999999 solid;
				background-color: white;
				color: #333333;
			}
		}
	}
</style>